<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            position: absolute;
        }
    </style>
</head>
<body>


    <script>
        // 对象成员： 
            // 属性 ：x(left) , y(top), width, height ,color  
            // 方法： drawRect   
            // 在画板上水平位置100px,垂直位置50px,绘制一个宽度200px ,高度为120px的蓝色矩形
            // 如果paint这个对象调用了 drawRect 方法，页面就会呈现上述的矩形


        // 定义函数(1)
        function createDrawObj() {
            // 定义空对象
            var obj = {};
            // 添加属性
            obj.x = 100;
            obj.y = 50;
            obj.width = 200;
            obj.height = 120;
            obj.bgcolor = "blue";
            // 添加方法
            obj.drawRect = function(){
                // 拼接字符串
                var str = "<div style='left:"+this.x+"px;top:"+this.y+"px;width:"+this.width+"px;height:"+this.height+"px;background:"+this.bgcolor+";'></div>";
                // 渲染字符串
                document.write(str);
            }
            // 返回obj对象
            return obj;
        }

        // 调用函数
        var paint = createDrawObj();
        console.log(paint);

        // 绘制一个矩形
        paint.drawRect();

        console.log("---------------------------------");

        // 拓展:
        // 定义函数(2)
        function createDrawObj2(x,y,w,h,color) {
            // 定义空对象
            var obj = {};
            // 添加属性
            obj.x = x || 100;
            obj.y = y || 50;
            obj.width = w || 200;
            obj.height = h || 120;
            obj.bgcolor = color || "blue";
            // 添加方法
            obj.drawRect = function(){
                // 拼接字符串
                var str = "<div style='left:"+this.x+"px;top:"+this.y+"px;width:"+this.width+"px;height:"+this.height+"px;background:"+this.bgcolor+";'></div>";
                // 渲染字符串
                document.write(str);
            }
            // 返回obj对象
            return obj;
        }

        // 调用函数
        var paint2 = createDrawObj2(50,150,100,60,"red");
        console.log(paint2);
        // 绘制一个矩形
        paint2.drawRect();
    </script>
</body>
</html>